<!--登录管理 -->
<template>
	<div class="contact" id="usermsgLcodeAdmin">
		<div class="loginadmin">
			<div class="codetabbar">
				<div class="codetabbar-head codetabbarmeach flex">
					<div class="codetabbarh-user codetabbarh-each ellipsis01" style="width: 25%;">用户名</div>
					<div class="codetabbarh-stime codetabbarh-each" style="width: 25%;">上班时间</div>
					<!-- <div class="codetabbarh-xtime codetabbarh-each" style="width: 24%;">上班时间</div> -->
					<div class="codetabbarh-lcode codetabbarh-each" style="width: 25%;">登录码</div>
					<div class="codetabbarh-fun codetabbarh-each" style="width:25%;border: none;">操作</div>
				</div>
				<div class="codetabbar-main" style="border-bottom: 1px solid #CACACA;">
					<div class="codetabbarmeach codetabbarm flex" v-for="(item,index) in loginicodedata" :key="index">
						<div class="codetabbarh-user codetabbarh-each ellipsis01" style="width:25%;">{{ item.realname }}</div>
						<div class="codetabbarh-stime codetabbarh-each" style="width: 25%;">{{ item.morning_start_work_time }} - {{ item.afternoon_end_work_time }}</div>
						<!-- <div class="codetabbarh-stime codetabbarh-each" style="width: 24%;">{{ item.morning_start_work_time }} - {{ item.morning_end_work_time }}</div> -->
						<!-- <div class="codetabbarh-xtime codetabbarh-each" style="width: 24%;">{{ item.afternoon_start_work_time }} - {{ item.afternoon_end_work_time }}</div> -->
						<div class="codetabbarh-lcode codetabbarh-each" style="width: 25%;">{{ item.login_code }}</div>
						<div class="codetabbarh-fun codetabbarh-each curpoin" style="width: 25%;border:none;" @click="compilefun(item,index)">修改</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog  
		  title="编辑登录码"
		  :visible.sync="logincodecom"
		  width="432px"
		  top="200px"
		  :before-close="logincodeClosefun"
		  :modal-append-to-body="false">
			<div class="lcodeeach flex">
				<div class="lcodeeachtitle">用户名</div>
				<div class="lcodeeachmsg">{{ logincodecomac.realname }}</div>
			</div>
			<div class="lcodeeach flex">
				<div class="lcodeeachtitle">起始时间</div>
				<div class="lcodeeachmsg">
					<el-time-picker
					    is-range
					    v-model="swtime"
					    range-separator=""
					    start-placeholder="开始时间"
					    end-placeholder="结束时间"
					    placeholder="选择时间范围"
						value-format="HH:mm"
						@change="swtimefun">
					  </el-time-picker>
				</div>
				<div class="lcodeeachicon"></div>
			</div>
			<!-- <div class="lcodeeach flex">
				<div class="lcodeeachtitle">起始时间</div>
				<div class="lcodeeachmsg">
					<el-time-picker
					    is-range
					    v-model="xwtime"
					    range-separator=""
					    start-placeholder="开始时间"
					    end-placeholder="结束时间"
					    placeholder="选择时间范围"
						value-format="HH:mm"
						@change="xwtimefun">
					  </el-time-picker>
				</div>
				<div class="lcodeeachicon"></div>
			</div> -->
			<div class="lcodeeach flex">
				<div class="lcodeeachtitle">登录码：</div>
				<div class="lcodeeachmsg">{{ logincodecomac.login_code }}</div>
				<div class="lcodeeachicon curpoin" @click="refresh()">
					<span class="mainColor el-icon-refresh-right"></span>
					<span class="mainColor">刷新</span>
				</div>
			</div>
		   <div class="logincodebtn flex">
			   <el-button class="logincodebtneach" @click="logincodeClosefun" style="background-color:#999999;color:#fff;">取消</el-button>
			   <el-button class="logincodebtneach mainbg" @click="logincodeenterfun()">保存</el-button>
		   </div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		props:['logincodeadd'],
		data(){
			return {
				roleId:'',   //  3售后总监  7 设计师经理
				loginicodedata:[],
				logincodecom:false,  // 编辑
				logincodecomac:{},
				swtime:'',
				xwtime:'',
			}
		},
		mounted(){
			this.roleId = this.$store.state.roleId;
			this.getlcode();
		},
		methods:{
			logincodeenterfun(){  // 编辑保存
				let sendData = {
					user_id:[this.logincodecomac.user_id],
					login_code:this.logincodecomac.login_code,
				};
				if(!!this.swtime) {
					sendData.morning_start_work_time = this.swtime[0];
					sendData.afternoon_end_work_time = this.swtime[1];
				};
				// if(!!this.swtime) {
				// 	sendData.morning_start_work_time = this.swtime[0]
				// 	sendData.morning_end_work_time = this.swtime[1]
				// };
				// if(!!this.xwtime){
				// 	sendData.afternoon_start_work_time = this.xwtime[0]
				// 	sendData.afternoon_end_work_time = this.xwtime[1]
				// };
				if(!this.swtime){  // && !this.xwtime
					this.$message({
					  message: '请输入上班时间',
					  type: 'warning'
					});
					return false
				};
				this.apifun.$post('/pc/Department/modifyLoginCode',sendData).then((res)=>{
					if(res.code ==  200){
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.logincodecom = false;
						this.getlcode();
					}
				})
			},
			
			compilefun(item,index){  // 编辑
				this.logincodecom = true;
				this.logincodecomac = item;
				this.swtime = [item.morning_start_work_time,item.afternoon_end_work_time];
				// this.swtime = [item.morning_start_work_time,item.morning_end_work_time];
				// this.xwtime = [item.afternoon_start_work_time,item.afternoon_end_work_time];
			},
			refresh(){  // 刷新
				this.apifun.$post('/pc/Department/generate',{}).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.logincodecomac.login_code = res.data;
					}
				})
			},
			swtimefun(e){
				this.swtime = [e[0],e[1]]
			},
			xwtimefun(e){
				this.xwtime = [e[0],e[1]]
			},
			logincodeClosefun(){  // 关闭弹窗
				this.logincodecom = false;
			},
			getlcode(){  // 获取登录码 
				let urls = '/pc/Department/designerLoginCode';
				if(this.roleId == 3){  //（售后总监）
					urls = '/pc/Department/queryLoginCode'   // 设计师经理
				}else if (this.roleId == 7){ // （设计经理查）
					urls = '/pc/Department/designerLoginCode';   // 设计师登录码
				}
				this.apifun.$post(urls,{}).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.loginicodedata = res.data;
					}
				})
			}
		}
	}
</script>
<style>
	#usermsgLcodeAdmin .el-range-editor--small.el-input__inner{
		width:270px;
		height:38px;
		line-height:38px;
		border: none;
		background-color:#F6F6F6;
	}
	#usermsgLcodeAdmin .el-range-editor--small.el-input__inner .el-range-input{
		background-color:#F6F6F6;
	}
</style>
<style scoped lang="scss">
	.loginadmin{
		width:93%;
		height:80vh;
		margin: 10px auto;
		min-width: 570px;
		padding:25px 2% 30px;
		border-radius:10px;
		background-color:#fff;
	}
	.codetabbar{
		width: 100%;
		min-width:500px;
		height:80vh;
		border-top-right-radius:8px;
		border-top-left-radius:8px;
		overflow-y: scroll;
		.codetabbarmeach{
			justify-content: space-between;
			height: 56px;
			line-height: 56px;
		}
		.codetabbarh-each{
			text-align: center;
			border-right: 1px solid #CACACA;
		}
		.codetabbar-head{
			position: sticky;
			top: 0;
			z-index: 10;
			background-color:#FFF6F1;
			border-top-right-radius:8px;
			border-top-left-radius:8px;
			font-size: 16px;
			color:#333333;
			border: 1px solid #FFCCCC;
			border-bottom: none;
			.codetabbarh-each{
				border-color:#FFCCCC;
			}
		}
		
		.codetabbarm{
			font-size: 14px;
			color:#333333;
			border: 1px solid #CACACA;
			border-bottom: none;
		}
	}
	// 弹窗
	.lcodeeach{
		padding: 10px 0;
		.lcodeeachtitle{
			width:80px;
			height:40px;
			line-height:40px;
		}
		.lcodeeachmsg{
			height:40px;
			line-height:40px;
		}
		.lcodeeachicon{
			margin-left: 10px;
			height: 40px;
			line-height: 40px;
		}
	}
	
	.logincodebtn{
		width: 100%;
		justify-content:flex-end;
		margin-top:20px;
		.logincodebtneach{
			width: 130px;
			height: 40px;
			color:#fff;
			font-size: 16px;
			border-radius:10px;
		}
	}
</style>